<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <script src="js/saling/fixAccuracyLost.js"></script>
    <link rel="shortcut icon" href="easyui/css/images/favicon.ico"/>
    <title>客户视图</title>
    <link rel="stylesheet" href="css/flipclock.css">
    <link href="css/CalcSS3.css" rel="stylesheet" type="text/css"/>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
    <link href="easyui/css/easyui.css" rel="stylesheet" type="text/css">
    <link href="easyui/css/easyui_animation.css" rel="stylesheet"
          type="text/css">
    <link href="easyui/css/easyui_plus.css" rel="stylesheet" type="text/css">
    <link href="easyui/css/insdep_theme_default.css" rel="stylesheet"
          type="text/css">
    <link href="easyui/css/icon.css" rel="stylesheet" type="text/css">
    <link href="easyui/css/font-awesome-4.7.0/css/font-awesome.min.css"
          rel="stylesheet" type="text/css">
    <script type="text/javascript" src="<c:url value="/js/utils/DateFormate.js"/>"></script>

    <!-- 引入公用表格和表单样式 -->
    <link href="css/utils/utilsDatagrid.css" rel="stylesheet"
          type="text/css">
    <link href="css/utils/utilsForm.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/utils/glass.js"></script>
    <link type="text/css" href="css/utils/glass.css">
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <!--放入自定义的图表-->
    <script src="js/monitor.js"></script>
    <script type="text/javascript" src="easyui/js/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/js/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="easyui/js/jquery.insdep-extend.min.js"></script>
    <script type="text/javascript" src="js/utils/dialog.js"></script>
    <script type="text/javascript" src="js/utils/dialog-hut.js"></script>


<!--引入时间轴样式-->
</head>
<body>
	<style>
.by {
	padding: 10px;
	text-align: center;
}
</style>
	<link href="css/client/client-detail.css" rel="stylesheet"
		type="text/css">
	<script type="text/javascript" src="js/client/client-detail.js"></script>
	<script type="text/javascript" src="js/client/jquery.waypoints.min.js"></script>

	<div class="jm-client-view-main">
		<div class="jm-client-view-head">
			<div class="jm-client-view-head-button">
				<div class="jm-client-view-head-button-left">
					<a id="jm-client-view-head-button-left-client-view-btn"
						style="color: #337ab7" class="easyui-linkbutton"
						data-options="plain:true,size:'small',onClick:function(){
							$('.kehushitu').show();
							$('.gongyingshangshitu').hide();
							
							$('#jm-client-view-head-button-left-client-view-btn').linkbutton({disabled:true});
							$('#jm-client-view-head-button-left-supper-view-btn').linkbutton({disabled:false});
						}">客户视图</a>
					<a id="jm-client-view-head-button-left-supper-view-btn"
						style="color: #337ab7" class="easyui-linkbutton"
						data-options="plain:true,size:'small',onClick:function(){
							$('.kehushitu').hide();
							$('.gongyingshangshitu').show();
							$('#jm-client-view-head-button-left-client-view-btn').linkbutton({disabled:false});
							$('#jm-client-view-head-button-left-supper-view-btn').linkbutton({disabled:true});
						}">供应商视图</a>
				</div>
				<div class="jm-client-view-head-button-right">
					ID:<a style="color: #337ab7" class="easyui-linkbutton"
						id="jm-client-view-head-button-right-cid"
						data-options="plain:true,size:'small'">${clientInfo.cid }</a> <a
						style="color: #337ab7" class="easyui-linkbutton"
						id="jm-client-view-head-button-right-del"
						data-options="iconCls:'icon-bule-remove',plain:true,size:'small'">删除</a>
					<a style="color: #337ab7" class="easyui-linkbutton"
						id="jm-client-view-head-button-right-edit"
						data-options="iconCls:'icon-edit2',plain:true,size:'small'">编辑</a>
				</div>
			</div>
			<div class="jm-client-view-head-title-clientName">
				<h3 class="">${clientInfo.cname }

					<sup>${clientInfo.stage }</sup>
				</h3>
			</div>
			<div class="jm-client-view-head-linkbutton">
				<span style="margin-left: 10px;">更新：</span> <span name=""
					type="text">${clientInfo.updateDate }</span> <span
					style="margin-left: 10px;">创建：</span> <span name="" type="text"
					value="2018-08-21">${clientInfo.createDate }</span> <span
					style="margin-left: 10px;">所有者：</span> <input type="hidden"
					id="client-detail-userId" value="${clientInfo.userId }"> <span
					name="" type="text" id="client-detail-uname"></span>
			</div>
			<script type="text/javascript">
				var userId = $('#client-detail-userId').val();
				$.ajax({
					url : 'client-get-userName',
					type : 'POST',
					data : {
						uId : userId
					},
					success : function(e) {
						$('#client-detail-uname').text(e);
					}
				});
			</script>

		</div>
		<div class="jm-client-view-body-left">
			<!-- 客户视图应收/应付 -->
			<div class="jm-client-view-body-left-content kehushitu">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td colspan="3" style="text-align: left"><a
							class="easyui-linkbutton"
							data-options="iconCls:'icon-pay',plain:true,disabled:true">应付/预付</a></td>
					</tr>
					<tr>
						<td><h5>￥${jihuahuikuanMoney }</h5></td>
						<td><h5>￥${jihuahuikuanMoney-huikuanMoney }</h5></td>
						<!-- <td><h5>￥899.00</h5></td> -->
					</tr>
					<tr>
						<td><p>计划回款</p></td>
						<td><p>智能应收</p></td>
						<!-- <td><p>预付金额</p></td> -->
					</tr>
				</table>

			</div>
			<!-- 客户视图签约数据-->
			<div class="jm-client-view-body-left-content kehushitu">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td colspan="4" style="text-align: left"><a
							class="easyui-linkbutton"
							data-options="iconCls:'icon-caigou',plain:true,disabled:true">签约数据</a></td>
					</tr>
					<tr>
						<td><h5>￥${heyueMoney }</h5></td>
						<td><h5>￥${fahuoMoney }</h5></td>
						<td><h5>￥${huikuanMoney }</h5></td>
					</tr>
					<tr>
						<td><p>合约</p></td>
						<td><p>发货</p></td>
						<td><p>回款</p></td>
					</tr>

				</table>
			</div>
			<!-- 供应商视图应收/应付 -->
			<%-- <div class="jm-client-view-body-left-content gongyingshangshitu">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td colspan="3" style="text-align: left"><a
							class="easyui-linkbutton"
							data-options="iconCls:'icon-pay',plain:true,disabled:true">应付</a></td>
					</tr>
					<tr>
						<td><h5></h5></td>
						<td><h5>￥${jihuahuikuanMoney }</h5></td>
						<td><h5></h5></td>
					</tr>
					<tr>
						<td><p></p></td>
						<td><p>计划付款</p></td>
						<td><p></p></td>
					</tr>
				</table>

			</div> --%>
			<!-- 供应商视图采购数据 -->
			<%-- <div class="jm-client-view-body-left-content gongyingshangshitu">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td colspan="4" style="text-align: left"><a
							class="easyui-linkbutton"
							data-options="iconCls:'icon-caigou',plain:true,disabled:true">采购数据</a></td>
					</tr>
					<tr>
						<td><h5>￥${caigouDanMoney }</h5></td>
						<td><h5>￥899.00</h5></td>
						<td><h5>￥899.00</h5></td>
					</tr>
					<tr>
						<td><p>采购</p></td>
						<td><p>已付</p></td>
						<td><p>票据</p></td>
					</tr>

				</table>
			</div> --%>
			<div class="jm-client-view-body-left-content gongyingshangshitu">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td style="text-align: left"><a class="easyui-linkbutton"
							data-options="iconCls:'icon-dollar',plain:true,disabled:true">采购费用</a></td>
						<td style="text-align: right"><input type="text"
							value="￥${caigouDanMoney }" /></td>
					</tr>



				</table>
			</div>
			<div class="jm-client-view-body-left-content">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td colspan="4" style="text-align: left"><a
							class="easyui-linkbutton"
							data-options="iconCls:'icon-base',plain:true,disabled:true">基本信息</a></td>
					</tr>
					<tr>
						<td style="text-align: right"><label>种类：</label></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.type }" readonly="readonly" /></td>

					</tr>
					<tr>
						<td style="text-align: right"><label>人员规模：</label></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.scale }" readonly="readonly" /></td>
					</tr>
					<tr>
						<td style="text-align: right"><label>来源：</label></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.source }" readonly="readonly" /></td>
					</tr>
					<tr>
						<td style="text-align: right"><label>关系等级：</label></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.relationship }" readonly="readonly" /></td>
					</tr>
					<tr>
						<td style="text-align: right"><label>信用等级：</label></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.credit }" readonly="readonly" /></td>
					</tr>

				</table>
			</div>
			<div class="jm-client-view-body-left-content">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td colspan="4" style="text-align: left"><a
							class="easyui-linkbutton"
							data-options="iconCls:'icon-contact',plain:true,disabled:true">联系人</a></td>
					</tr>
					<c:forEach items="${contacts }" var="contact">
						<c:choose>
							<c:when test="${contact.type=='主联系人' }">
								<tr>
									<td rowspan="6" style="text-align: center;"><c:choose>
											<c:when test="${contact.sex=='女' }">
												<a><img src="easyui/css/icons/client-view-woman.png"></a>
											</c:when>
											<c:otherwise>
												<a><img src="easyui/css/icons/client-view-man.png"></a>
											</c:otherwise>
										</c:choose><br> <span>${contact.contactName }</span><input
										type="hidden" value="${contact.contactid }"></td>
								</tr>
								<tr>
									<td style="text-align: right"><p>手机：</p></td>
									<td style="text-align: left"><input type="text"
										value="${contact.phone }" /></td>
								</tr>
								<tr>
									<td style="text-align: right"><p>电话：</p></td>
									<td style="text-align: left"><input type="text"
										value="${contact.homePhone }" /></td>
								</tr>
								<tr>
									<td style="text-align: right"><p>邮箱：</p></td>
									<td style="text-align: left"><input type="text"
										value="${contact.email }" /></td>
								</tr>
								<tr>
									<td style="text-align: right"><p>QQ：</p></td>
									<td style="text-align: left"><input type="text"
										value="${contact.qq }" /></td>
								</tr>
								<tr>
									<td style="text-align: right"><p>微信：</p></td>
									<td style="text-align: left"><input type="text"
										value="${contact.wechat }" /></td>
								</tr>
							</c:when>
							<c:otherwise>
								<tr>
									<td rowspan="6">
										<div style="text-align: center;">
											<c:choose>
												<c:when test="${contact.sex=='女' }">
													<a><img src="easyui/css/icons/client-view-woman.png"
														style="width: 32px; height: 32px;"></a>
												</c:when>
												<c:otherwise>
													<a><img src="easyui/css/icons/client-view-man.png"
														style="width: 32px; height: 32px;"></a>
												</c:otherwise>
											</c:choose>
											<br> <span>${contact.contactName}</span><input
												type="hidden" value="${contact.contactid }">
										</div>
									</td>
								</tr>
							</c:otherwise>
						</c:choose>
					</c:forEach>

				</table>
			</div>
			<div class="jm-client-view-body-left-content kehushitu">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td style="text-align: left"><a class="easyui-linkbutton"
							data-options="iconCls:'icon-dollar',plain:true,disabled:true">销售费用</a></td>
						<td style="text-align: right"><input type="text"
							value="￥${heyueMoney }" /></td>
					</tr>



				</table>
			</div>
			<div class="jm-client-view-body-left-content">
				<table class="jm-client-view-body-left-content-table" border="0"
					width="100%">
					<tr>
						<td style="text-align: left"><a class="easyui-linkbutton"
							data-options="iconCls:'icon-address',plain:true,disabled:true">地址</a></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.address }" readonly="readonly" /></td>
					</tr>

					<tr>
						<td style="text-align: right"><p>电话：</p></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.phone }" readonly="readonly" /></td>
					</tr>
					<tr>
						<td style="text-align: right"><p>网址：</p></td>
						<td style="text-align: left"><input type="text"
							value="${clientInfo.url }" readonly="readonly" /></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="jm-client-view-body-right">
			<div class="jm-client-view-body-right-title">
				<div class="jm-client-view-body-left-content-title">
					<a class="easyui-linkbutton"
						data-options="iconCls:'icon-go',plain:true,disabled:true">跟单时间线</a>
				</div>
			</div>
			<div class="jm-client-view-body-right-tabs">
				<div id="jm-client-view-body-right-tabs"
					class="easyui-tabs kehushitu"
					style="width: 100%; height: 100%; border: 0;"
					data-options="narrow:true,border:false,fit:true">

					<div title="全部${allLength }"
						data-options="fit:true,iconAlign:'top',closable:false"
						style="padding: 20px;">
						<div class="shijianzhou">
							<section class="timeline">
								<div class="wrapper">
									<c:forEach items="${clientDetailVos }" var="cdv"
										varStatus="status">
										<div class="timeline__item timeline__item--${status.index }">
											<div class="timeline__item__station"></div>
											<div class="timeline__item__content">
												<h2 class="timeline__item__content__date">${cdv.date }</h2>
												<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
													￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
													${cdv.state }</p>
											</div>
										</div>
									</c:forEach>
								</div>
							</section>
						</div>
					</div>

					<c:if test="${saleChancesLength>0 }">
						<div title="销售机会${saleChancesLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='销售机会' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

					<c:if test="${schemesLength>0 }">
						<div title="解决方案${schemesLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='解决方案' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

					<c:if test="${clientNeedsLength>0 }">
						<div title="详细需求${clientNeedsLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='详细需求' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>
					
					<c:if test="${offerDetailsVOsLength>0 }">
						<div title="报价${offerDetailsVOsLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='报价' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

					<c:if test="${hetongLength>0 }">
						<div title="合同${hetongLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='合同' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>

						</div>
					</c:if>

					<c:if test="${hetongLength>0 }">
						<div title="发货单${hetongLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='发货单' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

					<c:if test="${jihuahuikuanLength>0 }">
						<div title="计划回款${jihuahuikuanLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='计划回款' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

					<c:if test="${huikuanLength>0 }">
						<div title="回款${huikuanLength }"
							data-options="iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${clientDetailVos }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='回款' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

				</div>

				<div id="jm-client-view-body-right-pro-tabs"
					class="easyui-tabs gongyingshangshitu"
					style="width: 100%; height: 100%; border: 0;"
					data-options="narrow:true,border:false">

					<div title="全部${proLength }"
						data-options="pill:true,iconAlign:'top',closable:false"
						style="padding: 20px;">
						<div class="shijianzhou">
							<section class="timeline">
								<div class="wrapper">
									<c:forEach items="${proClientDetailVo }" var="cdv"
										varStatus="status">
										<div class="timeline__item timeline__item--${status.index }">
											<div class="timeline__item__station"></div>
											<div class="timeline__item__content">
												<h2 class="timeline__item__content__date">${cdv.date }</h2>
												<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
													￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
													${cdv.state }</p>
											</div>
										</div>
									</c:forEach>
								</div>
							</section>
						</div>
					</div>

					<c:if test="${cangoudanLength>0 }">
						<div title="采购单${cangoudanLength }"
							data-options="pill:true,iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${proClientDetailVo }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='采购单' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>

					<c:if test="${cangoumingxiLength>0 }">
						<div title="采购明细${cangoumingxiLength }"
							data-options="pill:true,iconAlign:'top',closable:false"
							style="overflow: auto; padding: 20px; display: none;">
							<div class="shijianzhou">
								<section class="timeline">
									<div class="wrapper">
										<c:forEach items="${proClientDetailVo }" var="cdv"
											varStatus="status">
											<c:if test="${cdv.type=='采购明细' }">
												<div class="timeline__item timeline__item--${status.index }">
													<div class="timeline__item__station"></div>
													<div class="timeline__item__content">
														<h2 class="timeline__item__content__date">${cdv.date }</h2>
														<p class="timeline__item__content__description">${cdv.type }&nbsp;&nbsp;
															￥${cdv.money } ${cdv.date } ${cdv.theme } ${cdv.name }
															${cdv.state }</p>
													</div>
												</div>
											</c:if>
										</c:forEach>
									</div>
								</section>
							</div>
						</div>
					</c:if>
				</div>
			</div>





			<div class="jm-client-view-body-right-time"></div>

		</div>
		<!-- 联系人视图对话框 -->
		<div id="client-detail-contact-view-dialog" class="easyui-dialog"
			style="background-color: #EBEFF2;"
			data-options="title:'联系人信息',
								iconCls:'icon-save2',
								width:750,
								height:700,
								closed:true,
								href:'to-client-view-contact',
								bodyCls:'by',
								shadow:true
								 "></div>
		<!-- 编辑客户对话框 -->
		<div id="client-detail-edit-client-dialog" class="easyui-dialog"
			style="background-color: #EBEFF2;"
			data-options="title:'客户基本信息',
						iconCls:'icon-save2',
						width:750,
						height:700,
						closed:true,
						href:'to-client-detail-edit-clientInfo',
						bodyCls:'by',
						shadow:true,
						buttons:[{
							text:'保存',
							iconCls:'icon-ok2',
							handler:function(){
								//提交表单事件
								$('#client-detail-edit-client-form').form({
									onSubmit:function(parmps){
										//进行验证
										return $(this).form('validate');
									},
									success:function(r){
										r = eval('('+r+')');
										if(r.success){
											//点击关闭，则窗口关闭
											$.messager.alert('成功', '恭喜，成功编辑客户！');
											$('#client-detail-edit-client-dialog').window('close');
											$('#client-detail-edit-client-form').form('clear');
										}else{
											$.messager.alert('错误', r.message);
										}
									}
								}).submit();
							}
       					
						},
						{
							text:'关闭',
							iconCls:'icon-cancel2',
							handler:function(){
								//点击关闭，则窗口关闭
								$('#client-detail-edit-client-dialog').window('close');
							}
						}
						]
						 "></div>
	</div>
	<script>
		function customWayPoint(className, addClassName, customOffset) {
			var waypoints = $(className).waypoint({
				handler : function(direction) {
					if (direction == "down") {
						$(className).addClass(addClassName);
					} else {
						$(className).removeClass(addClassName);
					}
				},
				offset : customOffset
			});
		}

		var defaultOffset = '50%';

		for (i = 0; i < 17; i++) {
			customWayPoint('.timeline__item--' + i, 'timeline__item-bg', defaultOffset);
		}
	</script>
</body>
</html>
